<template>
  <div class="container mx-auto px-4 py-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <p class="text-gray-500 mt-1">监控系统状态、管理维护记录和系统备份</p>
    </div>

    <!-- 状态概览卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white rounded-lg shadow p-6 border-l-4 border-emerald-500">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-gray-500">系统状态</p>
            <h3 class="text-2xl font-bold text-gray-900 mt-1">正常运行</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center">
            <i class="fa fa-check-circle text-emerald-600 text-xl"></i>
          </div>
        </div>
        <p class="text-sm text-gray-500 mt-4">
          <i class="fa fa-clock-o mr-1"></i> 已运行: {{ systemUptime }}
        </p>
      </div>

      <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-gray-500">最新备份</p>
            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ lastBackupTime }}</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
            <i class="fa fa-database text-blue-600 text-xl"></i>
          </div>
        </div>
        <p class="text-sm text-gray-500 mt-4">
          <i class="fa fa-file-text-o mr-1"></i> 大小: {{ lastBackupSize }}
        </p>
      </div>

      <div class="bg-white rounded-lg shadow p-6 border-l-4 border-amber-500">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-gray-500">待处理任务</p>
            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ pendingTasks }}</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
            <i class="fa fa-tasks text-amber-600 text-xl"></i>
          </div>
        </div>
        <p class="text-sm text-gray-500 mt-4">
          <i class="fa fa-exclamation-circle mr-1"></i> 其中 {{ urgentTasks }} 项紧急
        </p>
      </div>

      <div class="bg-white rounded-lg shadow p-6 border-l-4 border-gray-500">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-gray-500">系统容量</p>
            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ storageUsage }}%</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
            <i class="fa fa-hdd-o text-gray-600 text-xl"></i>
          </div>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2 mt-4">
          <div
              class="bg-gray-600 h-2 rounded-full"
              :style="{ width: storageUsage + '%' }"
          ></div>
        </div>
      </div>
    </div>

    <!-- 维护选项卡 -->
    <div class="bg-white rounded-lg shadow mb-6">
      <div class="border-b border-gray-200">
        <nav class="-mb-px flex" aria-label="Tabs">
          <button
              class="mr-8 py-4 px-1 border-emerald-500 text-emerald-600 whitespace-nowrap font-medium text-sm border-b-2"
              @click="activeTab = 'status'"
          >
            系统状态
          </button>
          <button
              class="mr-8 py-4 px-1 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap font-medium text-sm border-b-2"
              @click="activeTab = 'maintenance'"
          >
            维护记录
          </button>
          <button
              class="mr-8 py-4 px-1 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap font-medium text-sm border-b-2"
              @click="activeTab = 'backups'"
          >
            备份管理
          </button>
          <button
              class="py-4 px-1 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap font-medium text-sm border-b-2"
              @click="activeTab = 'logs'"
          >
            系统日志
          </button>
        </nav>
      </div>

      <!-- 系统状态 -->
      <div v-if="activeTab === 'status'" class="p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-6">系统状态详情</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
          <!-- 服务器信息 -->
          <div class="border border-gray-200 rounded-lg p-5">
            <h4 class="font-medium text-gray-800 mb-4 flex items-center">
              <i class="fa fa-server text-gray-500 mr-2"></i> 服务器信息
            </h4>
            <ul class="space-y-3">
              <li class="flex justify-between">
                <span class="text-gray-500">服务器名称:</span>
                <span class="font-medium">{{ serverInfo.name }}</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">IP 地址:</span>
                <span class="font-medium">{{ serverInfo.ip }}</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">CPU 使用率:</span>
                <span class="font-medium">{{ serverInfo.cpuUsage }}%</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">内存使用率:</span>
                <span class="font-medium">{{ serverInfo.memoryUsage }}%</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">磁盘空间:</span>
                <span class="font-medium">{{ serverInfo.diskUsed }} / {{ serverInfo.diskTotal }}</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">操作系统:</span>
                <span class="font-medium">{{ serverInfo.os }}</span>
              </li>
            </ul>
          </div>

          <!-- 数据库信息 -->
          <div class="border border-gray-200 rounded-lg p-5">
            <h4 class="font-medium text-gray-800 mb-4 flex items-center">
              <i class="fa fa-database text-gray-500 mr-2"></i> 数据库信息
            </h4>
            <ul class="space-y-3">
              <li class="flex justify-between">
                <span class="text-gray-500">数据库类型:</span>
                <span class="font-medium">{{ dbInfo.type }}</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">版本:</span>
                <span class="font-medium">{{ dbInfo.version }}</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">连接数:</span>
                <span class="font-medium">{{ dbInfo.connections }}</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">表数量:</span>
                <span class="font-medium">{{ dbInfo.tables }}</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">数据大小:</span>
                <span class="font-medium">{{ dbInfo.size }}</span>
              </li>
              <li class="flex justify-between">
                <span class="text-gray-500">最后优化时间:</span>
                <span class="font-medium">{{ dbInfo.lastOptimizeTime }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 服务状态 -->
        <div class="border border-gray-200 rounded-lg mb-6">
          <div class="p-5 border-b border-gray-200">
            <h4 class="font-medium text-gray-800 flex items-center">
              <i class="fa fa-cogs text-gray-500 mr-2"></i> 服务状态
            </h4>
          </div>
          <div class="divide-y divide-gray-200">
            <div class="p-4 flex items-center justify-between">
              <div>
                <p class="font-medium">API 服务</p>
                <p class="text-sm text-gray-500">提供系统接口服务</p>
              </div>
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                运行中
              </span>
            </div>
            <div class="p-4 flex items-center justify-between">
              <div>
                <p class="font-medium">任务调度服务</p>
                <p class="text-sm text-gray-500">处理定时任务和计划任务</p>
              </div>
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                运行中
              </span>
            </div>
            <div class="p-4 flex items-center justify-between">
              <div>
                <p class="font-medium">通知服务</p>
                <p class="text-sm text-gray-500">处理邮件和短信通知</p>
              </div>
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                运行中
              </span>
            </div>
            <div class="p-4 flex items-center justify-between">
              <div>
                <p class="font-medium">缓存服务</p>
                <p class="text-sm text-gray-500">提供数据缓存支持</p>
              </div>
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                运行中
              </span>
            </div>
            <div class="p-4 flex items-center justify-between">
              <div>
                <p class="font-medium">备份服务</p>
                <p class="text-sm text-gray-500">自动备份系统数据</p>
              </div>
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                运行中
              </span>
            </div>
          </div>
        </div>

        <!-- 系统操作 -->
        <div class="bg-gray-50 p-5 rounded-lg border border-gray-200">
          <h4 class="font-medium text-gray-800 mb-4">系统操作</h4>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button
                class="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors"
                @click="optimizeDatabase"
            >
              <i class="fa fa-database mr-2 text-blue-600"></i>
              优化数据库
            </button>
            <button
                class="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors"
                @click="cleanupLogs"
            >
              <i class="fa fa-trash-o mr-2 text-amber-600"></i>
              清理系统日志
            </button>
            <button
                class="flex items-center justify-center px-4 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors"
                @click="restartServices"
            >
              <i class="fa fa-refresh mr-2 text-purple-600"></i>
              重启服务
            </button>
          </div>
        </div>
      </div>

      <!-- 维护记录 -->
      <div v-if="activeTab === 'maintenance'" class="p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
          <h3 class="text-lg font-medium text-gray-900">系统维护记录</h3>
          <button
              class="mt-4 sm:mt-0 px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors flex items-center"
              @click="showAddMaintenanceModal = true"
          >
            <i class="fa fa-plus mr-2"></i> 新增维护记录
          </button>
        </div>

        <!-- 维护记录列表 -->
        <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">维护类型</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">开始时间</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">结束时间</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="record in maintenanceRecords" :key="record.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" :class="record.type === 'routine' ? 'bg-blue-100 text-blue-800' : 'bg-amber-100 text-amber-800'">
                    {{ record.type === 'routine' ? '常规维护' : '紧急修复' }}
                  </span>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm font-medium text-gray-900">{{ record.title }}</div>
                <div class="text-sm text-gray-500 line-clamp-1">{{ record.description }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <img
                      :src="record.operatorAvatar"
                      alt="用户头像"
                      class="w-6 h-6 rounded-full mr-2 object-cover"
                  >
                  <div class="text-sm text-gray-900">{{ record.operator }}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ record.startTime }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ record.endTime || '-' }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                        :class="record.status === 'completed' ? 'bg-green-100 text-green-800' :
                            record.status === 'in_progress' ? 'bg-blue-100 text-blue-800' :
                            'bg-gray-100 text-gray-800'">
                    {{ record.status === 'completed' ? '已完成' :
                      record.status === 'in_progress' ? '进行中' : '计划中' }}
                  </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <button
                    class="text-blue-600 hover:text-blue-900 mr-3"
                    @click="viewMaintenanceRecord(record)"
                >
                  查看
                </button>
                <button
                    class="text-amber-600 hover:text-amber-900"
                    @click="editMaintenanceRecord(record)"
                >
                  编辑
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
          <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
              <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">1</span> 到 <span class="font-medium">{{ maintenanceRecords.length }}</span> 条，共 <span class="font-medium">{{ maintenanceRecords.length }}</span> 条记录
              </p>
            </div>
            <div>
              <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span class="sr-only">上一页</span>
                  <i class="fa fa-chevron-left h-5 w-5"></i>
                </button>
                <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-emerald-50 text-sm font-medium text-emerald-600">
                  1
                </button>
                <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span class="sr-only">下一页</span>
                  <i class="fa fa-chevron-right h-5 w-5"></i>
                </button>
              </nav>
            </div>
          </div>
        </div>
      </div>

      <!-- 备份管理 -->
      <div v-if="activeTab === 'backups'" class="p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
          <h3 class="text-lg font-medium text-gray-900">数据备份管理</h3>
          <div class="mt-4 sm:mt-0 flex space-x-3">
            <button
                class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors flex items-center"
                @click="createBackup"
            >
              <i class="fa fa-plus mr-2"></i> 创建备份
            </button>
            <button
                class="px-4 py-2 border border-gray-300 text-gray-700 bg-white rounded-md hover:bg-gray-50 transition-colors flex items-center"
                @click="showBackupSettings = !showBackupSettings"
            >
              <i class="fa fa-cog mr-2"></i> 备份设置
            </button>
          </div>
        </div>

        <!-- 备份设置 -->
        <div v-if="showBackupSettings" class="bg-gray-50 border border-gray-200 rounded-lg p-5 mb-6">
          <h4 class="font-medium text-gray-800 mb-4">自动备份设置</h4>
          <form @submit.prevent="saveBackupSettings">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="flex items-center">
                  <input
                      type="checkbox"
                      v-model="backupSettings.autoBackupEnabled"
                      class="rounded border-gray-300 text-emerald-600 shadow-sm focus:border-emerald-300 focus:ring focus:ring-emerald-200 focus:ring-opacity-50"
                  >
                  <span class="ml-2 text-sm text-gray-700">启用自动备份</span>
                </label>
              </div>

              <div v-if="backupSettings.autoBackupEnabled">
                <label class="block text-sm font-medium text-gray-700 mb-1">备份周期</label>
                <select
                    v-model="backupSettings.backupFrequency"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                >
                  <option value="daily">每天</option>
                  <option value="weekly">每周</option>
                  <option value="monthly">每月</option>
                </select>
              </div>

              <div v-if="backupSettings.autoBackupEnabled">
                <label class="block text-sm font-medium text-gray-700 mb-1">备份时间</label>
                <input
                    type="time"
                    v-model="backupSettings.backupTime"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                >
              </div>

              <div v-if="backupSettings.autoBackupEnabled">
                <label class="block text-sm font-medium text-gray-700 mb-1">备份保留数量</label>
                <input
                    type="number"
                    min="1"
                    v-model="backupSettings.backupRetentionCount"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                >
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">备份类型</label>
                <div class="grid grid-cols-2 gap-2">
                  <label class="flex items-center">
                    <input
                        type="checkbox"
                        v-model="backupSettings.includeDatabase"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                    >
                    <span class="ml-2 text-sm text-gray-700">数据库</span>
                  </label>
                  <label class="flex items-center">
                    <input
                        type="checkbox"
                        v-model="backupSettings.includeFiles"
                        class="rounded border-gray-300 text-emerald-600 shadow-sm"
                    >
                    <span class="ml-2 text-sm text-gray-700">文件数据</span>
                  </label>
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">备份存储位置</label>
                <select
                    v-model="backupSettings.storageLocation"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                >
                  <option value="local">本地存储</option>
                  <option value="cloud">云端存储</option>
                  <option value="both">本地+云端</option>
                </select>
              </div>
            </div>

            <div class="flex justify-end mt-4">
              <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors">
                保存设置
              </button>
            </div>
          </form>
        </div>

        <!-- 备份列表 -->
        <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备份名称</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建方式</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="backup in backups" :key="backup.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">{{ backup.name }}</div>
                <div class="text-sm text-gray-500">{{ backup.filename }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                        :class="backup.type === 'full' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'">
                    {{ backup.type === 'full' ? '完整备份' : '增量备份' }}
                  </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ backup.size }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ backup.createTime }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ backup.createdBy === 'system' ? '自动' : '手动' }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                        :class="backup.status === 'completed' ? 'bg-green-100 text-green-800' :
                            backup.status === 'in_progress' ? 'bg-blue-100 text-blue-800' :
                            'bg-red-100 text-red-800'">
                    {{ backup.status === 'completed' ? '已完成' :
                      backup.status === 'in_progress' ? '进行中' : '失败' }}
                  </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <button
                    class="text-blue-600 hover:text-blue-900 mr-3"
                    @click="downloadBackup(backup)"
                    :disabled="backup.status !== 'completed'"
                >
                  下载
                </button>
                <button
                    class="text-green-600 hover:text-green-900 mr-3"
                    @click="restoreFromBackup(backup)"
                    :disabled="backup.status !== 'completed'"
                >
                  恢复
                </button>
                <button
                    class="text-red-600 hover:text-red-900"
                    @click="deleteBackup(backup.id)"
                    :disabled="backup.isDefault"
                >
                  删除
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
          <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
              <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">1</span> 到 <span class="font-medium">{{ backups.length }}</span> 条，共 <span class="font-medium">{{ backups.length }}</span> 条记录
              </p>
            </div>
            <div>
              <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span class="sr-only">上一页</span>
                  <i class="fa fa-chevron-left h-5 w-5"></i>
                </button>
                <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-emerald-50 text-sm font-medium text-emerald-600">
                  1
                </button>
                <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span class="sr-only">下一页</span>
                  <i class="fa fa-chevron-right h-5 w-5"></i>
                </button>
              </nav>
            </div>
          </div>
        </div>
      </div>

      <!-- 系统日志 -->
      <div v-if="activeTab === 'logs'" class="p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
          <h3 class="text-lg font-medium text-gray-900">系统日志</h3>
          <div class="mt-4 sm:mt-0 flex space-x-3">
            <div class="relative">
              <input
                  type="text"
                  v-model="logSearchKeyword"
                  placeholder="搜索日志内容..."
                  class="w-full sm:w-64 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
              <i class="fa fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
            <button
                class="px-4 py-2 border border-gray-300 text-gray-700 bg-white rounded-md hover:bg-gray-50 transition-colors flex items-center"
                @click="exportLogs"
            >
              <i class="fa fa-download mr-2"></i> 导出日志
            </button>
          </div>
        </div>

        <!-- 日志筛选 -->
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">日志级别</label>
              <select
                  v-model="logFilter.level"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  @change="filterLogs"
              >
                <option value="all">全部级别</option>
                <option value="error">错误</option>
                <option value="warn">警告</option>
                <option value="info">信息</option>
                <option value="debug">调试</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">模块</label>
              <select
                  v-model="logFilter.module"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  @change="filterLogs"
              >
                <option value="all">全部模块</option>
                <option value="system">系统</option>
                <option value="user">用户管理</option>
                <option value="transaction">交易管理</option>
                <option value="company">厂商管理</option>
                <option value="notification">通知服务</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
              <input
                  type="date"
                  v-model="logFilter.startDate"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
              <input
                  type="date"
                  v-model="logFilter.endDate"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
            </div>
          </div>
          <div class="flex justify-end mt-4">
            <button
                class="px-4 py-2 border border-gray-300 text-gray-700 bg-white rounded-md hover:bg-gray-50 transition-colors"
                @click="resetLogFilters"
            >
              重置筛选条件
            </button>
            <button
                class="ml-3 px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
                @click="filterLogs"
            >
              筛选日志
            </button>
          </div>
        </div>

        <!-- 日志列表 -->
        <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
          <div class="max-h-[500px] overflow-y-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50 sticky top-0 z-10">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">级别</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模块</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内容</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP地址</th>
              </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="log in filteredLogs" :key="log.id" class="hover:bg-gray-50 transition-colors">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {{ log.timestamp }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                          :class="log.level === 'error' ? 'bg-red-100 text-red-800' :
                              log.level === 'warn' ? 'bg-amber-100 text-amber-800' :
                              log.level === 'info' ? 'bg-green-100 text-green-800' :
                              'bg-gray-100 text-gray-800'">
                      {{ log.level === 'error' ? '错误' :
                        log.level === 'warn' ? '警告' :
                            log.level === 'info' ? '信息' : '调试' }}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {{ log.module }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <img
                        :src="log.userAvatar"
                        alt="用户头像"
                        class="w-6 h-6 rounded-full mr-2 object-cover"
                    >
                    <div class="text-sm text-gray-900">{{ log.username || '系统' }}</div>
                  </div>
                </td>
                <td class="px-6 py-4 text-sm text-gray-500 max-w-md">
                  <div class="line-clamp-2">{{ log.message }}</div>
                  <button
                      v-if="log.message.length > 100"
                      class="text-blue-600 text-xs mt-1 hover:underline"
                      @click="viewFullLog(log)"
                  >
                    查看完整内容
                  </button>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {{ log.ipAddress }}
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 分页 -->
        <div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
          <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
              <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">1</span> 到 <span class="font-medium">{{ filteredLogs.length }}</span> 条，共 <span class="font-medium">{{ logs.length }}</span> 条记录
              </p>
            </div>
            <div>
              <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span class="sr-only">上一页</span>
                  <i class="fa fa-chevron-left h-5 w-5"></i>
                </button>
                <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-emerald-50 text-sm font-medium text-emerald-600">
                  1
                </button>
                <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                  2
                </button>
                <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                  3
                </button>
                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                  ...
                </span>
                <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                  8
                </button>
                <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span class="sr-only">下一页</span>
                  <i class="fa fa-chevron-right h-5 w-5"></i>
                </button>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增/编辑维护记录弹窗 -->
  <div v-if="showAddMaintenanceModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-6 transform transition-all">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">{{ isEditingMaintenance ? '编辑维护记录' : '新增维护记录' }}</h3>
        <button @click="showAddMaintenanceModal = false" class="text-gray-400 hover:text-gray-500">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <form @submit.prevent="saveMaintenanceRecord">
        <div class="space-y-4 mb-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">维护类型 <span class="text-red-500">*</span></label>
            <div class="flex space-x-4">
              <label class="flex items-center">
                <input
                    type="radio"
                    value="routine"
                    v-model="currentMaintenance.type"
                    class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300"
                >
                <span class="ml-2 text-sm text-gray-700">常规维护</span>
              </label>
              <label class="flex items-center">
                <input
                    type="radio"
                    value="emergency"
                    v-model="currentMaintenance.type"
                    class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300"
                >
                <span class="ml-2 text-sm text-gray-700">紧急修复</span>
              </label>
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">维护标题 <span class="text-red-500">*</span></label>
            <input
                type="text"
                v-model="currentMaintenance.title"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
            >
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">维护描述</label>
            <textarea
                v-model="currentMaintenance.description"
                rows="3"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                placeholder="详细描述维护内容、目的和结果..."
            ></textarea>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">开始时间 <span class="text-red-500">*</span></label>
              <input
                  type="datetime-local"
                  v-model="currentMaintenance.startTime"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  required
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">结束时间</label>
              <input
                  type="datetime-local"
                  v-model="currentMaintenance.endTime"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  :disabled="currentMaintenance.status === 'in_progress'"
              >
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">维护状态 <span class="text-red-500">*</span></label>
            <select
                v-model="currentMaintenance.status"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
            >
              <option value="planned">计划中</option>
              <option value="in_progress">进行中</option>
              <option value="completed">已完成</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">负责人 <span class="text-red-500">*</span></label>
            <select
                v-model="currentMaintenance.operatorId"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
            >
              <option value="">选择负责人</option>
              <option v-for="user in systemUsers" :key="user.id" :value="user.id">
                {{ user.name }}
              </option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">维护结果</label>
            <textarea
                v-model="currentMaintenance.result"
                rows="2"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500"
                placeholder="记录维护结果、遇到的问题和解决方案..."
                :disabled="currentMaintenance.status !== 'completed'"
            ></textarea>
          </div>
        </div>

        <div class="flex justify-end space-x-3">
          <button
              type="button"
              class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
              @click="showAddMaintenanceModal = false"
          >
            取消
          </button>
          <button
              type="submit"
              class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
          >
            {{ isEditingMaintenance ? '更新记录' : '保存记录' }}
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 查看完整日志弹窗 -->
  <div v-if="showFullLogModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-6 transform transition-all max-h-[80vh] overflow-hidden flex flex-col">
      <div class="flex justify-between items-center mb-4 border-b pb-4">
        <h3 class="text-lg font-semibold text-gray-800">日志详情</h3>
        <button @click="showFullLogModal = false" class="text-gray-400 hover:text-gray-500">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="flex-1 overflow-y-auto p-2">
        <div class="space-y-4">
          <div class="flex justify-between">
            <span class="text-sm text-gray-500">时间:</span>
            <span class="text-sm font-medium">{{ currentFullLog.timestamp }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-sm text-gray-500">级别:</span>
            <span class="text-sm font-medium"
                  :class="currentFullLog.level === 'error' ? 'text-red-600' :
                      currentFullLog.level === 'warn' ? 'text-amber-600' :
                      currentFullLog.level === 'info' ? 'text-green-600' : 'text-gray-600'">
              {{ currentFullLog.level === 'error' ? '错误' :
                currentFullLog.level === 'warn' ? '警告' :
                    currentFullLog.level === 'info' ? '信息' : '调试' }}
            </span>
          </div>
          <div class="flex justify-between">
            <span class="text-sm text-gray-500">模块:</span>
            <span class="text-sm font-medium">{{ currentFullLog.module }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-sm text-gray-500">用户:</span>
            <span class="text-sm font-medium">{{ currentFullLog.username || '系统' }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-sm text-gray-500">IP地址:</span>
            <span class="text-sm font-medium">{{ currentFullLog.ipAddress }}</span>
          </div>
          <div>
            <span class="text-sm text-gray-500 block mb-2">日志内容:</span>
            <pre class="bg-gray-50 p-4 rounded-md text-sm overflow-x-auto">{{ currentFullLog.message }}</pre>
          </div>
        </div>
      </div>

      <div class="mt-4 border-t pt-4 flex justify-end">
        <button
            type="button"
            class="px-4 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
            @click="showFullLogModal = false"
        >
          关闭
        </button>
      </div>
    </div>
  </div>

  <!-- 恢复备份确认弹窗 -->
  <div v-if="showRestoreConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 transform transition-all">
      <div class="text-center mb-6">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-4">
          <i class="fa fa-exclamation-triangle text-red-600 text-2xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-800">确认恢复数据</h3>
        <p class="text-gray-600 mt-2">
          您确定要从备份 <span class="font-medium">{{ restoreBackupName }}</span> 恢复数据吗？
          此操作将覆盖当前系统数据，且无法撤销！
        </p>
      </div>

      <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
        <button
            type="button"
            class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
            @click="showRestoreConfirmModal = false"
        >
          取消
        </button>
        <button
            type="button"
            class="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
            @click="confirmRestore"
        >
          确认恢复
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 激活的选项卡
const activeTab = ref('status');

// 系统状态数据
const systemUptime = ref('15天 8小时 32分钟');
const lastBackupTime = ref('2025-09-07 02:00');
const lastBackupSize = ref('2.4 GB');
const pendingTasks = ref(3);
const urgentTasks = ref(1);
const storageUsage = ref(68);

// 服务器信息
const serverInfo = ref({
  name: 'carbon-server-01',
  ip: '192.168.1.100',
  cpuUsage: 32,
  memoryUsage: 68,
  diskUsed: '68 GB',
  diskTotal: '100 GB',
  os: 'Linux Ubuntu 20.04 LTS'
});

// 数据库信息
const dbInfo = ref({
  type: 'MySQL',
  version: '8.0.28',
  connections: 24,
  tables: 48,
  size: '18.5 GB',
  lastOptimizeTime: '2025-09-01 03:15'
});

// 维护记录数据
const maintenanceRecords = ref([
  {
    id: 1,
    type: 'routine',
    title: '系统月度维护',
    description: '进行系统例行检查、安全补丁更新和性能优化',
    operator: 'admin',
    operatorAvatar: 'https://picsum.photos/id/1005/40/40',
    startTime: '2025-09-01 00:00',
    endTime: '2025-09-01 02:30',
    status: 'completed'
  },
  {
    id: 2,
    type: 'routine',
    title: '数据库优化',
    description: '执行数据库索引优化、碎片整理和数据备份',
    operator: 'system1',
    operatorAvatar: 'https://picsum.photos/id/1012/40/40',
    startTime: '2025-08-15 03:00',
    endTime: '2025-08-15 03:45',
    status: 'completed'
  },
  {
    id: 3,
    type: 'emergency',
    title: '修复交易计算漏洞',
    description: '修复碳积分交易计算中的精度问题，确保交易数据准确',
    operator: 'admin',
    operatorAvatar: 'https://picsum.photos/id/1005/40/40',
    startTime: '2025-08-10 14:30',
    endTime: '2025-08-10 16:45',
    status: 'completed'
  },
  {
    id: 4,
    type: 'routine',
    title: '系统安全加固',
    description: '更新安全策略，强化访问控制，安装最新安全补丁',
    operator: 'system1',
    operatorAvatar: 'https://picsum.photos/id/1012/40/40',
    startTime: '2025-09-15 00:00',
    endTime: '',
    status: 'planned'
  }
]);

// 系统用户（用于维护记录的负责人选择）
const systemUsers = ref([
  { id: 1, name: 'admin' },
  { id: 2, name: 'system1' },
  { id: 3, name: 'system2' }
]);

// 维护记录弹窗相关
const showAddMaintenanceModal = ref(false);
const isEditingMaintenance = ref(false);
const currentMaintenance = reactive({
  id: '',
  type: 'routine',
  title: '',
  description: '',
  startTime: '',
  endTime: '',
  status: 'planned',
  operatorId: '',
  result: ''
});

// 备份管理数据
const backups = ref([
  {
    id: 1,
    name: '系统全量备份 - 20250907',
    filename: 'carbon_backup_20250907_full.sql',
    type: 'full',
    size: '2.4 GB',
    createTime: '2025-09-07 02:00',
    createdBy: 'system',
    status: 'completed',
    isDefault: true
  },
  {
    id: 2,
    name: '系统增量备份 - 20250906',
    filename: 'carbon_backup_20250906_incremental.sql',
    type: 'incremental',
    size: '450 MB',
    createTime: '2025-09-06 02:00',
    createdBy: 'system',
    status: 'completed',
    isDefault: false
  },
  {
    id: 3,
    name: '手动备份 - 交易数据',
    filename: 'carbon_backup_20250905_manual.sql',
    type: 'full',
    size: '2.3 GB',
    createTime: '2025-09-05 15:30',
    createdBy: 'admin',
    status: 'completed',
    isDefault: false
  },
  {
    id: 4,
    name: '系统增量备份 - 20250908',
    filename: 'carbon_backup_20250908_incremental.sql',
    type: 'incremental',
    size: '320 MB',
    createTime: '2025-09-08 02:00',
    createdBy: 'system',
    status: 'in_progress',
    isDefault: false
  }
]);

// 备份设置
const showBackupSettings = ref(false);
const backupSettings = reactive({
  autoBackupEnabled: true,
  backupFrequency: 'daily',
  backupTime: '02:00',
  backupRetentionCount: 30,
  includeDatabase: true,
  includeFiles: true,
  storageLocation: 'both'
});

// 恢复备份确认弹窗
const showRestoreConfirmModal = ref(false);
const restoreBackupName = ref('');
const restoreBackupId = ref('');

// 系统日志数据
const logs = ref([
  {
    id: 1,
    timestamp: '2025-09-08 10:23:45',
    level: 'info',
    module: 'system',
    username: 'admin',
    userAvatar: 'https://picsum.photos/id/1005/40/40',
    message: '系统维护页面访问成功',
    ipAddress: '192.168.1.10'
  },
  {
    id: 2,
    timestamp: '2025-09-08 09:15:22',
    level: 'info',
    module: 'backup',
    username: '',
    userAvatar: '',
    message: '自动增量备份任务开始执行',
    ipAddress: '127.0.0.1'
  },
  {
    id: 3,
    timestamp: '2025-09-08 09:30:15',
    level: 'info',
    module: 'backup',
    username: '',
    userAvatar: '',
    message: '自动增量备份完成，备份文件: carbon_backup_20250908_incremental.sql，大小: 320 MB',
    ipAddress: '127.0.0.1'
  },
  {
    id: 4,
    timestamp: '2025-09-08 08:45:12',
    level: 'warn',
    module: 'notification',
    username: '',
    userAvatar: '',
    message: '邮件发送失败: 收件人邮箱不存在 (user@example.com)，将重试发送',
    ipAddress: '127.0.0.1'
  },
  {
    id: 5,
    timestamp: '2025-09-08 07:30:55',
    level: 'info',
    module: 'user',
    username: 'zhangsan',
    userAvatar: 'https://picsum.photos/id/1014/40/40',
    message: '用户登录成功',
    ipAddress: '192.168.1.15'
  },
  {
    id: 6,
    timestamp: '2025-09-08 06:12:33',
    level: 'error',
    module: 'transaction',
    username: 'lisi',
    userAvatar: 'https://picsum.photos/id/1015/40/40',
    message: '碳积分交易失败: 余额不足。用户尝试交易 100 积分，但账户仅拥有 50 积分。交易ID: txn_123456789',
    ipAddress: '192.168.1.16'
  },
  {
    id: 7,
    timestamp: '2025-09-08 05:45:22',
    level: 'debug',
    module: 'system',
    username: '',
    userAvatar: '',
    message: '系统定时任务调度器检查完成，共检测到 12 个活跃任务，下次检查时间: 2025-09-08 06:45:22',
    ipAddress: '127.0.0.1'
  }
]);

// 日志筛选
const logSearchKeyword = ref('');
const logFilter = reactive({
  level: 'all',
  module: 'all',
  startDate: '',
  endDate: ''
});

// 查看完整日志弹窗
const showFullLogModal = ref(false);
const currentFullLog = ref({});

// 计算属性：筛选后的日志
const filteredLogs = computed(() => {
  return logs.value.filter(log => {
    // 搜索关键词筛选
    if (logSearchKeyword.value && !log.message.includes(logSearchKeyword.value) &&
        !(log.username && log.username.includes(logSearchKeyword.value)) &&
        !log.ipAddress.includes(logSearchKeyword.value)) {
      return false;
    }

    // 日志级别筛选
    if (logFilter.level !== 'all' && log.level !== logFilter.level) {
      return false;
    }

    // 模块筛选
    if (logFilter.module !== 'all' && log.module !== logFilter.module) {
      return false;
    }

    // 日期筛选
    const logDate = new Date(log.timestamp.split(' ')[0]);
    if (logFilter.startDate) {
      const startDate = new Date(logFilter.startDate);
      if (logDate < startDate) return false;
    }

    if (logFilter.endDate) {
      const endDate = new Date(logFilter.endDate);
      endDate.setDate(endDate.getDate() + 1); // 包含结束日期当天
      if (logDate >= endDate) return false;
    }

    return true;
  });
});

// 页面加载时初始化
onMounted(() => {
  // 设置默认的开始时间为当前时间
  const now = new Date();
  const dateTimeStr = now.toISOString().slice(0, 16);
  currentMaintenance.startTime = dateTimeStr;
});

// 系统操作函数
const optimizeDatabase = () => {
  if (confirm('确定要执行数据库优化吗？此操作可能需要几分钟时间，期间数据库性能可能会受影响。')) {
    alert('数据库优化已开始执行，完成后将通知您。');
    // 实际项目中这里会调用API执行数据库优化
  }
};

const cleanupLogs = () => {
  if (confirm('确定要清理系统日志吗？此操作将删除30天前的历史日志，释放存储空间。')) {
    alert('系统日志清理已开始执行，完成后将通知您。');
    // 实际项目中这里会调用API清理日志
  }
};

const restartServices = () => {
  if (confirm('确定要重启系统服务吗？此操作将导致服务短暂中断（约1-2分钟）。')) {
    alert('系统服务重启已开始执行，完成后将通知您。');
    // 实际项目中这里会调用API重启服务
  }
};

// 维护记录函数
const viewMaintenanceRecord = (record) => {
  // 这里可以实现查看维护记录详情的逻辑
  console.log('查看维护记录:', record);
  alert(`查看维护记录: ${record.title}`);
};

const editMaintenanceRecord = (record) => {
  // 填充当前维护记录数据到表单
  currentMaintenance.id = record.id;
  currentMaintenance.type = record.type;
  currentMaintenance.title = record.title;
  currentMaintenance.description = record.description;
  currentMaintenance.startTime = new Date(record.startTime).toISOString().slice(0, 16);
  currentMaintenance.endTime = record.endTime ? new Date(record.endTime).toISOString().slice(0, 16) : '';
  currentMaintenance.status = record.status;

  // 查找负责人ID
  const operator = systemUsers.value.find(u => u.name === record.operator);
  currentMaintenance.operatorId = operator ? operator.id : '';

  isEditingMaintenance.value = true;
  showAddMaintenanceModal.value = true;
};

const saveMaintenanceRecord = () => {
  if (isEditingMaintenance.value) {
    // 更新现有维护记录
    const index = maintenanceRecords.value.findIndex(r => r.id === currentMaintenance.id);
    if (index !== -1) {
      const operator = systemUsers.value.find(u => u.id === currentMaintenance.operatorId);
      maintenanceRecords.value[index] = {
        ...maintenanceRecords.value[index],
        type: currentMaintenance.type,
        title: currentMaintenance.title,
        description: currentMaintenance.description,
        startTime: currentMaintenance.startTime.replace('T', ' '),
        endTime: currentMaintenance.endTime ? currentMaintenance.endTime.replace('T', ' ') : '',
        status: currentMaintenance.status,
        operator: operator ? operator.name : ''
      };
    }
    alert('维护记录已更新！');
  } else {
    // 创建新的维护记录
    const operator = systemUsers.value.find(u => u.id === currentMaintenance.operatorId);
    const newRecord = {
      id: Math.max(...maintenanceRecords.value.map(r => r.id)) + 1,
      type: currentMaintenance.type,
      title: currentMaintenance.title,
      description: currentMaintenance.description,
      operator: operator ? operator.name : '',
      operatorAvatar: operator ? `https://picsum.photos/id/${1000 + operator.id}/40/40` : '',
      startTime: currentMaintenance.startTime.replace('T', ' '),
      endTime: currentMaintenance.endTime ? currentMaintenance.endTime.replace('T', ' ') : '',
      status: currentMaintenance.status
    };
    maintenanceRecords.value.unshift(newRecord);
    alert('新维护记录已创建！');
  }
  showAddMaintenanceModal.value = false;
};

// 备份管理函数
const createBackup = () => {
  const backupName = prompt('请输入备份名称:', `手动备份 - ${new Date().toLocaleDateString()}`);
  if (backupName) {
    // 创建新备份
    const newBackup = {
      id: Math.max(...backups.value.map(b => b.id)) + 1,
      name: backupName,
      filename: `carbon_backup_${new Date().toISOString().slice(0,10).replace(/-/g,'')}_manual.sql`,
      type: 'full',
      size: '0 MB',
      createTime: new Date().toISOString().slice(0, 16).replace('T', ' '),
      createdBy: 'admin',
      status: 'in_progress',
      isDefault: false
    };
    backups.value.unshift(newBackup);
    alert('备份已开始创建，将在后台执行。');

    // 模拟备份完成（实际项目中由后端通知）
    setTimeout(() => {
      const index = backups.value.findIndex(b => b.id === newBackup.id);
      if (index !== -1) {
        backups.value[index].status = 'completed';
        backups.value[index].size = '2.5 GB';
      }
    }, 3000);
  }
};

const saveBackupSettings = () => {
  alert('备份设置已保存！');
  showBackupSettings.value = false;
};

const downloadBackup = (backup) => {
  alert(`开始下载备份文件: ${backup.filename}`);
  // 实际项目中这里会调用API生成下载链接
};

const restoreFromBackup = (backup) => {
  restoreBackupName.value = backup.name;
  restoreBackupId.value = backup.id;
  showRestoreConfirmModal.value = true;
};

const confirmRestore = () => {
  alert(`已开始从备份 ${restoreBackupName.value} 恢复数据，这可能需要一段时间。`);
  showRestoreConfirmModal.value = false;
  // 实际项目中这里会调用API执行恢复操作
};

const deleteBackup = (backupId) => {
  if (confirm('确定要删除此备份吗？删除后将无法恢复。')) {
    backups.value = backups.value.filter(b => b.id !== backupId);
    alert('备份已删除！');
  }
};

// 日志管理函数
const filterLogs = () => {
  console.log('筛选日志:', logFilter);
  // 筛选逻辑由computed属性处理
};

const resetLogFilters = () => {
  logFilter.level = 'all';
  logFilter.module = 'all';
  logFilter.startDate = '';
  logFilter.endDate = '';
  logSearchKeyword.value = '';
};

const exportLogs = () => {
  alert('日志导出已开始，完成后将提供下载链接。');
  // 实际项目中这里会调用API导出日志
};

const viewFullLog = (log) => {
  currentFullLog.value = log;
  showFullLogModal.value = true;
};
</script>

<style scoped>
/* 选项卡切换动画 */
.tab-enter-active, .tab-leave-active {
  transition: opacity 0.3s ease;
}
.tab-enter-from, .tab-leave-to {
  opacity: 0;
}

/* 表单元素聚焦样式优化 */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* 弹窗动画 */
.modal-enter-active {
  animation: modalFadeIn 0.3s ease-out;
}
.modal-leave-active {
  animation: modalFadeOut 0.3s ease-in;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* 日志内容样式 */
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
